<template>
	<view class="flex-col page">
		<!-- <image class="image"
			src="https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=f7ef1c09f4b4c7e398c5e20507795e83.png" />
		<view class="flex-row justify-center relative group">
			<image class="image_2 pos"
				src="https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=594c25a36ed5e7363da703ed3b0e7468.png" />
			<text class="text">添加音频</text>
		</view> -->
		<u-navbar title="添加音频" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<view class="flex-col list">
			<view class="flex-row section list-item mt-15-5" @click="byText"
				:style="{backgroundImage: 'url(' + commonData.addAudioOptionData.addAudioListBg +')'}">
				<view class="flex-col justify-start items-end relative group_2">
					<view class="flex-col justify-start items-center image-wrapper_2"
						:style="{backgroundImage: 'url(' + commonData.addAudioOptionData.addAudioRfBg +')'}">
						<image class="image_4" :src="commonData.addAudioOptionData.tgwzIcon2" />
					</view>
					<view class="flex-col justify-start items-center image-wrapper pos_2"
						:style="{backgroundImage: 'url(' + commonData.addAudioOptionData.addAudioLfBg +')'}">
						<image class="image_3" :src="commonData.addAudioOptionData.tgwzIcon1" />
					</view>
				</view>
				<view class="flex-col items-start self-start group_3">
					<text class="font">通过文字</text>
					<text class="mt-10 font_3">脚本音频一键获取</text>
				</view>
				<view class="flex-row items-center self-start section_2">
					<text class="font_2">立即添加</text>
					<image class="shrink-0 image_5 ml-2-5"
						src="https://terminator.axu9.com/images/add-audio-right.png" />
				</view>
			</view>
			<view class="flex-row section list-item mt-15-5" @click="byAudio"
				:style="{backgroundImage: 'url(' + commonData.addAudioOptionData.addAudioListBg +')'}">
				<view class="flex-col justify-start items-end relative group_2">
					<view class="flex-col justify-start items-center image-wrapper_2"
						:style="{backgroundImage: 'url(' + commonData.addAudioOptionData.addAudioRfBg +')'}">
						<image class="image_4" :src="commonData.addAudioOptionData.tgyyIcon1" />
					</view>
					<view class="flex-col justify-start items-center image-wrapper pos_2"
						:style="{backgroundImage: 'url(' + commonData.addAudioOptionData.addAudioLfBg +')'}">
						<image class="image_3" :src="commonData.addAudioOptionData.tgyyIcon2" />
					</view>
				</view>
				<view class="flex-col items-start self-start group_3">
					<text class="font">通过语音</text>
					<text class="mt-10 font_3">脚本音频一键获取</text>
				</view>
				<view class="flex-row items-center self-start section_2">
					<text class="font_2">立即添加</text>
					<image class="shrink-0 image_5 ml-2-5"
						src="https://terminator.axu9.com/images/add-audio-right.png" />
				</view>
			</view>
			<view class="flex-row section list-item mt-15-5"
				:style="{backgroundImage: 'url(' + commonData.addAudioOptionData.addAudioListBg +')'}">
				<view class="flex-col justify-start items-end relative group_2">
					<view class="flex-col justify-start items-center image-wrapper_2"
						:style="{backgroundImage: 'url(' + commonData.addAudioOptionData.addAudioRfBg +')'}">
						<image class="image_4" :src="commonData.addAudioOptionData.tqspnrIcon1" />
					</view>
					<view class="flex-col justify-start items-center image-wrapper pos_2"
						:style="{backgroundImage: 'url(' + commonData.addAudioOptionData.addAudioLfBg +')'}">
						<image class="image_3" :src="commonData.addAudioOptionData.tqspnrIcon2" />
					</view>
				</view>
				<view class="flex-col items-start self-start group_3">
					<text class="font">提取视频内容</text>
					<text class="mt-10 font_3">脚本音频一键获取</text>
				</view>
				<view class="flex-row items-center self-start section_2 " @click="extractVideos">
					<text class="font_2">立即提取</text>
					<image class="shrink-0 image_5 ml-2-5"
						src="https://terminator.axu9.com/images/add-audio-right.png" />
				</view>
			</view>

		</view>
		<!-- 语音上传 选项 弹窗 -->
		<u-popup v-model="showPop" mode="bottom" close-icon-color="#fff" closeable border-radius="28"
			:mask-custom-style="maskCustomStyle">
			<view class="popup" :style="{backgroundImage: 'url(' + commonData.showIntegalPopData.byaudioPopBg +')'}">
				<view class="flex-col flex-1 ml-7-5">
					<text class="self-center title">通过语音</text>
					<view class="flex-col items-center">
						<view class="opt-list-item flex-row justify-between items-center"
							v-for="(item,index) in optionList" :key="index" @click="clickOptin(index)">
							<view class="opt-list-item-lf flex-row">
								<view class="lf-img-wrap flex-row items-center">
									<image class="lf-img" :src="item.icon" mode=""></image>
								</view>
								<view class="lf-title flex-row items-center">
									{{item.title}}
								</view>
							</view>
							<view class="">
								<image class="rg-img" src="https://terminator.axu9.com/images/arrow-right-byaudio.png"
									mode=""></image>
							</view>
						</view>
					</view>

				</view>
			</view>
		</u-popup>


		<!-- 设置标题弹窗 -->
		<audioTitlePop ref="audiotitle" @submit="submit" :isLoading="isLoading"></audioTitlePop>

	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import {
		tapeFile
	} from "@/api/audio.js"
	import audioTitlePop from "../../components/audioTitlePop"
	export default {
		components: {
			audioTitlePop
		},
		data() {
			return {
				commonData: {},
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				showPop: false,
				optionList: [{
						icon: commonData.addAudioOptionData.byaudioJiluIcon,
						title: '录音',
					},
					{
						icon: commonData.addAudioOptionData.byaudioVideoIcon,
						title: '视频声音',
					},
					{
						icon: commonData.addAudioOptionData.byaudioWenjianIcon,
						title: '文件夹中的声音',
					}
				],
				audioUrl: '', //音频路径
				showPop1: false, //设置标题弹窗
				// audioName: '',
				audioTitle: '', //设置音频标题名称
				videoPath: '', //视频路径
				toOptionType: 1, //跳转类型 1音视频合成 2音频库--添加音频 3作品库--添加音频
				isLoading: false, //是否加载中
				audioId: '', //音频id
			}
		},
		onLoad(options) {
			console.log(options, 'options')
			this.commonData = commonData;
			// this.getVideoPath();
			this.videoPath = options.videoPath ? options.videoPath : '';
			this.toOptionType = options.toOptionType ? options.toOptionType : 1
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			getVideoPath() {
				// 获取当前页面栈
				let pages = getCurrentPages();
				// 获取上一个页面
				let prevPage = pages[pages.length - 2];
				// 获取上一个页面的data
				let data = prevPage ? prevPage.data : {};
				// 访问data中的数据
				console.log(data.videoPath, 'datatat'); // 替换yourDataKey为你需要的数据键名
				this.videoPath = data.videoPath;
			},
			// 通过文字添加音频
			byText() {
				uni.navigateTo({
					url: '/pagesCreate/addAudioByText/index?clickoption=1' + '&toOptionType=' + this.toOptionType +
						'&videoPath=' + this.videoPath
				})
				uni.setStorageSync("gateback",2)
			},
			// 通过语音添加音频
			byAudio() {
				this.showPop = true;
			},
			// 通过视频提取
			extractVideos() {
				uni.showToast({
					title: '开发中',
					icon: 'none'
				})
				// uni.navigateTo({
				// 	url: '/pagesCreate/extractVideos/index?videoPath=' + this.videoPath  + '&toOptionType=' + this.toOptionType
				// })
				// uni.setStorageSync("gateback",3)
			},
			uploadAudio(filePath, fileName) {
				var _this = this;
				_this.$upload(filePath).then(res => {
					console.log(res, 'uploadImg')
					if (res.data.errno == 1) {
						_this.audioUrl = res.data.img
						// _this.audioName = fileName
						console.log(_this.audioUrl, '上传音频')
						// _this.showPop1 = true;
						_this.$refs.audiotitle.open();
						// uni.reLaunch({
						// 	url: '/pages/create/index?audioName=' + fileName + '&audioUrl=' + _this.audioUrl
						// })
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}


				}).catch(err => {
					console.log(err, 'err')

				})
			},
			submit(data) {
				// if(this.audioTitle == ''){
				// 	uni.showToast({
				// 		title: '音频标题不能为空',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				uni.showLoading({
					title: '添加中'
				})
				this.isLoading = true;
				console.log(data, 'submit')
				this.audioTitle = data
				tapeFile({
					uid: uni.getStorageSync("userId"),
					title: this.audioTitle,
					mp3: this.audioUrl
				}).then(res => {
					uni.hideLoading();
					this.isLoading = false;
					console.log(res, 'eeee')
					if (res.errno == 0) {
						this.audioId = res.data;
						// if(this.addType == 3){
						// 	uni.redirectTo({
						// 		url: '/pagesHome/audioList/index?audioName=' + this.audioTitle + '&audioUrl=' + this.audioUrl + '&videoPath=' + this.videoPath
						// 	})
						// }else if(this.addType == 2){
						// 	uni.reLaunch({
						// 		url: '/pages/mine/index?current=1'
						// 	})
						// }else {
						// 	uni.reLaunch({
						// 		url: '/pages/create/index?audioName=' + this.audioTitle + '&audioUrl=' + this.audioUrl + '&videoPath=' + this.videoPath
						// 	})
						// }
						if (this.toOptionType == 1) {
							uni.reLaunch({
								url: '/pages/create/index?audioTitle=' + this.audioTitle + '&audioUrl=' +
									this.audioUrl + '&videoPath=' + this.videoPath + '&audioId=' + this
									.audioId
							})
						} else if (this.toOptionType == 2) {
							uni.redirectTo({
								url: '/pagesHome/audioList/index?videoPath=' + this.videoPath
							})
						} else if (this.toOptionType == 3) {
							uni.redirectTo({
								url: '/pagesMine/worksLibrary/index?current=1'
							})
						}

					}
				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
				})
			},
			clickOptin(index) {
				console.log(index, '走了')
				if (index == 0) {
					uni.navigateTo({
						url: '/pagesCreate/addAudio/index?videoPath=' + this.videoPath + '&toAddType=4' +
							'&toOptionType=' + this.toOptionType
					})
				} else if (index == 1) {
					uni.showToast({
						title: '开发中',
						icon: 'none'
					})
				} else if (index == 2) {
					// uni.chooseVideo
					// #ifdef MP
					var _this = this;
					wx.chooseMessageFile({
						count: 1, // 默认99
						type: 'file', // 选择文件的类型
						extension: ['mp3', 'm4a', 'amr', 'wav', 'aac', 'MP3', 'M4A', 'AMR', 'WAV',
							'AAC'
						], // 选择文件的扩展名
						// extension: ['.m﻿4a', '.mp3'],
						success: function(res) {
							const filePath = res.tempFiles[0].path; // 获取音频文件的临时路径
							// const fileName = res.tempFiles[0].name;
							console.log(res, 'res')
							_this.uploadAudio(filePath);

							// 使用uni.uploadFile()方法上传音频文件到服务器
							// uni.uploadFile({
							//   url: 'http://example.com/upload', // 替换为你的上传接口地址
							//   filePath: filePath,
							//   name: 'file', // 上传文件的字段名，‌服务器端会使用这个名字来接收文件
							//   formData: {}, // 如果需要的话，‌可以在这里添加其他的表单数据
							//   success: function (uploadFileRes) {
							//     console.log('上传成功');
							//     console.log(uploadFileRes.data); // 处理上传成功后的数据
							//   },
							//   fail: function (res) {
							//     console.log('上传失败');
							//   }
							// });
						}
					});
					// #endif

				}
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);
</style>
<style lang="scss" scoped>
	.ml-2-5 {
		margin-left: 5rpx;
	}

	.mt-15-5 {
		margin-top: 31rpx;
	}

	.page {
		padding: 35rpx 20rpx 736rpx;
		background-color: #111113;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image {
		margin-left: 42rpx;
		margin-right: 13rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		margin-top: 46rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.list {
		margin-top: 25rpx;
		/* padding: 0 10rpx; */
		width: 710rpx;
	}

	.section {
		padding: 4rpx 10rpx 24rpx;
		border-radius: 24rpx;
		// background-image: url('https://terminator.axu9.com/images/add-audio-list-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.group_2 {
		padding-top: 22rpx;
		width: 229rpx;
	}

	.image-wrapper_2 {
		padding: 41rpx 0 36rpx;
		border-radius: 17rpx;
		// background-image: url('https://terminator.axu9.com/images/add-audio-rg-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 124rpx;
	}

	.image_4 {
		width: 71rpx;
		height: 74rpx;
	}

	.image-wrapper {
		padding: 21rpx 0 29rpx;
		border-radius: 17rpx;
		// background-image: url('https://terminator.axu9.com/images/add-audio-lf-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 140rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		top: 0;
	}

	.image_3 {
		width: 112rpx;
		height: 124rpx;
	}

	.group_3 {
		margin-left: 50rpx;
		margin-top: 69rpx;
		width: 220rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.font_3 {
		font-size: 18rpx;
		font-family: PingFang SC;
		line-height: 17rpx;
		color: #999999;
	}

	.ml-75 {
		margin-left: 75rpx;
	}

	.section_2 {
		/* margin-left: 73rpx; */
		margin-top: 72rpx;
		padding: 18rpx 18rpx 15rpx 22rpx;
		// background-image: linear-gradient(90deg, #ddf9f1 0%, #b9fed5 100%);
		background-image: linear-gradient(90deg, $add-audio-option-btn-bg-lf 0%, $add-audio-option-btn-bg-rg 100%);
		border-radius: 28rpx;
		height: 56rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		color: #010101;
	}

	.image_5 {
		width: 10rpx;
		height: 15rpx;
	}

	/* 弹窗 */
	.popup {
		width: 100%;
		height: 668rpx;
		// background-image: url('https://terminator.axu9.com/images/byaudio-pop-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}

	.title {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 100rpx;
		font-weight: 500;
		color: #ffffff;
		height: 100rpx;
	}

	.opt-list-item {
		// background-color: #382b23;
		border: 1rpx solid $audiolist-option-list-bd-color;
		background-color: $add-audio-option-item-bd-color;
		border-radius: 24rpx;
		height: 143rpx;
		// border: 1rpx solid #5d4b2a;
		width: 690rpx;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
	}

	.opt-list-item:first-child .lf-img {
		width: 32rpx;
		height: 45rpx;
	}

	.opt-list-item:last-child .lf-img {
		width: 36rpx;
		height: 31rpx;
	}

	.lf-title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		margin-left: 20rpx;
	}

	.lf-img {
		width: 35rpx;
		height: 30rpx;
	}

	.rg-img {
		width: 11rpx;
		height: 20rpx;
	}


	.title1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.input-wrap {
		padding: 41rpx 0;
		border-radius: 16rpx;
		width: 542rpx;
		border: 1rpx solid #ffffff;
		margin-top: 35rpx;
	}

	.input-class1 {
		margin-left: 30rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
	}

	.input-placeholder1 {
		/* margin-left: 30rpx; */
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
	}

	.content1 {
		margin-left: 6rpx;
		color: #ffffff;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 54rpx;
		text-align: center;
		height: 270rpx;
		overflow-y: scroll;
	}

	.bottom {
		margin-top: 26rpx;
	}

	.text_agree {
		color: #ffffff;
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
	}

	.bottom-btn {
		margin-top: 35rpx;
	}

	.agree-btn {
		padding: 34rpx 0;
		flex: 1 1 257rpx;
		border-radius: 16rpx;
		height: 102rpx;
		border-left: solid 2rpx #00e586;
		border-right: solid 2rpx #00e586;
		border-top: solid 2rpx #00e586;
		border-bottom: solid 2rpx #00e586;
	}

	.font-noagree {
		color: #00e586;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}

	.font-agree {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}

	.noagree-btn {
		margin-right: 5rpx;
		padding: 34rpx 0;
		flex: 1 1 257rpx;
		background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
		border-radius: 16rpx;
		height: 100rpx;
	}
</style>